<template>
  <div class="activityBlock">
    <van-row>
      <van-col span="10" class="activityBlock-left">
        <div class="activityBlock-left-block">
          <van-image height="100%" :src="require('@/assets/waitToDel3.jpeg')"/>
        </div>
        <div class="activityBlock-left-detail">
          <div class="activityBlock-left-detail-top">
            <van-icon name="map-marked"/>
            <span>距离1.4km</span>
          </div>
          <div class="activityBlock-left-detail-center">
            <van-image
              width="2.5rem"
              round='true'
              :src="require('@/assets/avatar.png')"
            />
          </div>
          <div class="activityBlock-left-detail-bottom">
            <p>地点 正在举行活动</p>
            <p>已有 x 人参加</p>
          </div>
        </div>
      </van-col>
      <van-col span="14" class="activityBlock-right">
        <div class="activityBlock-right-top">
          <div class="activityBlock-right-block">
            <van-image width="100%" :src="require('@/assets/waitToDel4.jpeg')"/>
          </div>
          <div class="activityBlock-right-detail">
            <div class="activityBlock-right-detail-top">
              <p>地点 正在举行活动</p>
              <p>已有 x 人参加</p>
            </div>
            <div class="activityBlock-right-detail-bottom">
              <div class="activityBlock-right-detail-bottom-userInfo">
                <van-image
                  width="2.5rem"
                  round='true'
                  :src="require('@/assets/avatar.png')"
                />
              </div>
              <div class="activityBlock-right-detail-bottom-distance">
                <van-icon name="map-marked"/>
                <span>距离1.4km</span>
              </div>
            </div>
          </div>
        </div>
        <div class="activityBlock-right-bottom">
          <div class="activityBlock-right-block">
            <van-image width="100%" :src="require('@/assets/waitToDel5.jpeg')"/>
          </div>
          <div class="activityBlock-right-detail">
            <div class="activityBlock-right-detail-top">
              <p>地点 正在举行活动</p>
              <p>已有 x 人参加</p>
            </div>
            <div class="activityBlock-right-detail-bottom">
              <div class="activityBlock-right-detail-bottom-userInfo">
                <van-image
                  width="2.5rem"
                  round='true'
                  :src="require('@/assets/avatar.png')"
                />
              </div>
              <div class="activityBlock-right-detail-bottom-distance">
                <van-icon name="map-marked"/>
                <span>距离1.4km</span>
              </div>
            </div>
          </div>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { Col, Row, Image as VanImage, Icon } from "vant";
export default {
  components:{
    [Col.name]:Col,
    [Row.name]:Row,
    [VanImage.name]:VanImage,
    [Icon.name]:Icon
  }
}
</script>

<style lang="less"> 
  .activityBlock{
    .activityBlock-left{
      height: 13.4375rem;
      border-right: .3125rem solid #fff;
      position: relative;
      box-sizing: border-box;
      .activityBlock-left-block{
        width: 100%;
        height: 100%;
        position: absolute;
        box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.5) inset;
        overflow: hidden;
        z-index: -1;
      }
      .activityBlock-left-detail{
        display: flex;
        height: 100%;
        flex-direction: column;
        color:#fff;
        .activityBlock-left-detail-top{
          padding: .3125rem;
          text-align: left;
          >span{
            padding-left: .3125rem;
          }
        }
        .activityBlock-left-detail-center{
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          >.van-image{
            border-radius: 25rem;
            box-shadow: 0 0 1.25rem .3125rem orange;
          }
          >p{
            margin: 0;
          }
        }
        .activityBlock-left-detail-bottom{
          >p{
            padding: 0;
            margin: 0;;
          }
          >p:nth-child(1){
            font-size: .875rem;
          }
          >p:nth-child(2){
            font-size: .75rem;
            padding-bottom: .625rem;
          }
        }
      }
    }
    .activityBlock-right{
      .activityBlock-right-block{
        width: 100%;
        height: 100%;
        position: absolute;
        box-shadow: 0 0 3.125rem rgba(0, 0, 0, 0.5) inset;
        overflow: hidden;
        z-index: -1;
      }
      .activityBlock-right-top{
        height: 50%;
        position: relative;
        border-bottom: .1563rem solid #fff;
        box-sizing: border-box;
      }
      .activityBlock-right-bottom{
        height: 50%;
        position: relative;
        border-top: .1563rem solid #fff;
        box-sizing: border-box;
      }
      .activityBlock-right-detail{
        display: flex;
        height: 100%;
        flex-direction: column;
        color:#fff;
        text-align: left;
        .activityBlock-right-detail-top{
          padding: 5px;
          >p{
            padding: 0;
            margin: 0;
          };
          >p:nth-child(1){
            font-size: .875rem;
          }
          >p:nth-child(2){
            font-size: .75rem;
            padding-bottom: .625rem;
          }
        }
        .activityBlock-right-detail-bottom{
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          .activityBlock-right-detail-bottom-userInfo{
            display: flex;
            align-items: center;
            padding: 5px;
            >.van-image{
              border-radius: 400px;
              box-shadow: 0 0 1.25rem .3125rem orange;
            }
          }
          .activityBlock-right-detail-bottom-distance{
            padding: 5px;
          }
        }
      }
    }
  }
  
</style>